/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react'
import { Input, Tooltip, Select, Space, InputNumber, message, Upload, Radio, DatePicker } from 'antd';
import { QuestionCircleFilled } from '@ant-design/icons'
import { LoadingOutlined, PlusOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
import EmployInfoMore from './EmployInfoMore';
import picture from '../../../assets/images/bg/111.jpg'
import moment from 'moment'
import { Button } from 'antd/lib/radio'
import add from '../../../assets/css/newEmployees/index.module.css'
// import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import '../../../assets/css/EmployInfo/info.css'
import Service from '../../../service';
import { inject, observer } from 'mobx-react'
import { toJS } from 'mobx';


function EmployeeInfo({ info, departmentSettingsStore }) {
    console.log(info);
    const upInfo = {
        user_id: info.user_id,//id
        account: info.account,//账号
        password: info.password,//登录密码
        user_name: info.user_name,//昵称
        department: info.department,//部门 ----------------------------------------------------
        user_role: info.user_role,//角色  -------------------------------------------------------
        customer_quantity_limit: info.customer_quantity_limit,//客户数量
        commission: info.commission,//提成
        status: info.status,//状态
        phone_number: info.phone_number,//手机号码
        user_email: info.user_email,//email
        sex: info.sex,//性别
        birthday: info.birthday,//生日
        id_number: info.id_number,//身份证
        joining_time: info.joining_time,//入司时间
        hometown: info.hometown,//家乡
        address: info.address,//家庭住址
        emergency_contact: info.emergency_contact,//紧急联系人
        emergency_phone: info.emergency_phone,//紧急联系电话
        person_introduction: info.person_introduction,//个人介绍
        personal_signature: info.personal_signature,//个性签名
        resignation_status: info.resignation_status,//离职状态
        resignation_time: info.resignation_time,//离职时间
        resignation_reason: info.resignation_reason,//离职原因
    }

    const dateFormat = 'YYYY/MM/DD';
    // const [userInfo, setUserInfo] = useState({})

    const [department, setDepartment] = useState([])
    const [role, setRole] = useState([])
    useEffect(() => {
        departmentSettingsStore.setUpUserInfo(upInfo)
    }, [info])
    useEffect(() => {
        getDepartmentList()
        getRoleList()
    }, [])
    const getDepartmentList = async () => {
        const result = await Service.StaffManage.DepartmentSettings.freshList()
        setDepartment(result.data)
    }
    const getRoleList = async () => {
        const result = await Service.StaffManage.RolePermission.freshList()
        setRole(result.data)
    }
    const upUserInfo = departmentSettingsStore.upUserInfo

    const addInfo = departmentSettingsStore.addInfo
    const onChange = (e) => {
        if (info) {
            let newobj = { ...departmentSettingsStore.upUserInfo }
            newobj[e.target.dataset.key] = e.target.value
            departmentSettingsStore.setUpUserInfo(newobj)
        } else {
            console.log(e.target.dataset.key, e.target.value);
            let newobj = { ...addInfo }
            newobj[e.target.dataset.key] = e.target.value
            departmentSettingsStore.setAddInfo(newobj)
        }


    }
    const { Option } = Select;
    const getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    };

    const beforeUpload = (file) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';

        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }

        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }

        return isJpgOrPng && isLt2M;
    };
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();
    const [attend, setAttend] = useState(true)

    const handleChange = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }

        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };
    const addEmployee = async () => {
        const data = toJS(departmentSettingsStore.addInfo)
        console.log(data);
        const result = await Service.StaffManage.EmployeeList.addList(data)
        if (result.code === 200) message.success('添加成功');
        departmentSettingsStore.setAddInfo('')
        console.log(result);
    }

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </div>
    );
    const changeAttend = () => {
        setAttend(!attend)
    }
    return (
        <div id='EmployInfo_container'>
            <h3>基本信息</h3>
            <div className='main'>
                <div className='main_box'>
                    <div className='left'>
                        <div><span>*</span><p> 登录账号</p></div>
                        <div><span>*</span><p> 登录密码</p></div>
                        <div><span>*</span><p> 所在部门</p></div>
                        <div><p> 客户数量限制</p></div>
                        <div style={{ height: '102px' }}><p> 头像</p></div>
                        <div><p> 手机号码</p></div>
                        <div><p> 性别</p></div>

                    </div>
                    <div className='right'>
                        <div > {info ? upUserInfo.account : <Input data-key='account' style={{ width: '80%' }} onChange={(e) => onChange(e)}></Input>} {info ? '' : <Tooltip title="录入后不可修改"><QuestionCircleFilled /></Tooltip>}</div>
                        <div><Space direction="vertical"><Input.Password defaultValue={info ? upUserInfo.password : addInfo.password} onChange={(e) => onChange(e)} key={upUserInfo.password} data-key='password' style={{ width: '80%' }} placeholder={info ? '不修改请留空' : ''} /> </Space></div>
                        <div><Select key={upUserInfo.department} data-key='department' onChange={(e) => onChange({ target: { value: e, dataset: { key: 'department' } } })} defaultValue={info ? upUserInfo.department : addInfo.department} placeholder='请选择' style={{ width: 120 }} allowClear>{department.map(item => <Option key={item.dept_title} value={item.dept_title}>{item.dept_title}</Option>)} </Select></div>
                        <div> <InputNumber key={upUserInfo.customer_quantity_limit} min={0} data-key='customer_quantity_limit' defaultValue={info ? upUserInfo.customer_quantity_limit : addInfo.customer_quantity_limit} onChange={(e) => onChange({ target: { value: e, dataset: { key: 'customer_quantity_limit' } } })} />  <Tooltip title="默认0 为不限制"><QuestionCircleFilled /></Tooltip> </div>
                        <div style={{ height: '102px' }}> <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            beforeUpload={beforeUpload}
                            onChange={handleChange}
                        >
                            {imageUrl ? (
                                <img
                                    src={imageUrl}
                                    alt="avatar"
                                    style={{
                                        width: '100%',
                                    }}
                                />
                            ) : (
                                uploadButton
                            )}
                        </Upload></div>
                        <div>
                            <Input data-key='phone_number' key={upUserInfo.phone_number} onChange={(e) => onChange(e)} defaultValue={info ? upUserInfo.phone_number : addInfo.phone_number} style={{ width: '80%' }}></Input>
                        </div>
                        <div>
                            <Radio.Group key={upUserInfo.sex} onChange={(e) => onChange({ target: { value: e.target.value, dataset: { key: 'sex' } } })} defaultValue={upUserInfo.sex + ''}  >
                                <Radio value='1'>男</Radio>
                                <Radio value='2'>女</Radio>
                            </Radio.Group></div>
                    </div>

                </div>
                <div className='main_box'>
                    <div className='left'>
                        <div><span>*</span><p>真实姓名</p></div>
                        <div><span>*</span><p> 重复密码</p></div>
                        <div><span>*</span><p> 角色权限</p></div>
                        <div><span>*</span><p> 员工提成</p></div>
                        <div style={{ height: '102px' }}><p> 默认头像</p></div>
                        <div><p> Email</p></div>
                        <div><p> 生日</p></div>
                    </div>
                    <div className='right'>
                        <div> <Input key='user_name' data-key='user_name' onChange={onChange} value={info ? upUserInfo.user_name : ''} style={{ width: '80%' }}></Input>{info ? <Tooltip title="更新所有记录慎重"><QuestionCircleFilled /></Tooltip> : ''}</div>
                        <div><Space direction="vertical"><Input.Password data-key='slat' onChange={onChange} style={{ width: '80%' }} placeholder={info ? '不修改请留空' : ''} /> </Space></div>
                        <div><Select key={upUserInfo.user_role} data-key='user_role' onChange={(e) => onChange({ target: { value: e, dataset: { key: 'user_role' } } })} defaultValue={info ? upUserInfo.user_role : addInfo.user_role} placeholder='请选择' style={{ width: 120 }} allowClear>{role.map(item => <Option key={item.role_title} value={item.role_id}>{item.role_title}</Option>)}</Select></div>
                        <div> <InputNumber key={upUserInfo.commission} min={0} step="0.01" defaultValue={info ? upUserInfo.commission : addInfo.commission} onChange={(e) => onChange({ target: { value: e, dataset: { key: 'commission' } } })} />  <Tooltip title="(允许数值为0.01%~100%)"><QuestionCircleFilled /></Tooltip> </div>
                        <div style={{ height: '102px' }}> <img
                            src={imageUrl ? imageUrl : picture}
                            alt="avatar"
                            style={{
                                width: '102px',
                                height: '102px'
                            }}
                        /></div>
                        <div>
                            <Input data-key='user_email' key={upUserInfo.user_email} onChange={(e) => onChange(e)} defaultValue={info ? upUserInfo.user_email : addInfo.user_email} style={{ width: '80%' }}></Input>
                        </div>
                        <div>
                            <Space direction="vertical">
                                <DatePicker key={upUserInfo.birthday} defaultValue={info ? moment(upUserInfo.birthday, dateFormat) : ''} format={dateFormat} onChange={(value, dateString) => onChange({ target: { value: dateString, dataset: { key: 'birthday' } } })} />
                            </Space>
                        </div>
                    </div>
                </div>
            </div>
            <div id='moreInfo' onClick={changeAttend}>
                {attend ? <DownOutlined /> : <UpOutlined />}{attend ? <p>展开用户详细信息</p> : <p>收起用户详细信息</p>}
            </div>
            <div>
                {!attend ? <EmployInfoMore upInfo={info ? upUserInfo : {}} onChange={onChange} /> : ''}
            </div>
            <div>
                {!info ? <div className={add.up}>
                    <Button onClick={addEmployee} size='large' >立即添加</Button>

                </div> : ''}
            </div>

        </div>




    )
}

export default inject('departmentSettingsStore')(observer(EmployeeInfo))
